<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import type { ComponentSize } from 'element-plus'
import { StoreModel } from '../assets/models/Store';
import { managerApis } from '../assets/apis/ManagerApis';
import { userInfoStore } from '../assets/userStore/userStore';

const userStore = userInfoStore();//引入用户信息存储
const fill = ref<boolean>(true);//布局填充
const size = ref<ComponentSize>('default');//设置组件大小
const stores = ref<Array<StoreModel>>([]);
let isEmpty = ref(true);//用于标记店铺列表是否为空


onMounted(() => {
    managerApis.queryAuditingStoreList(userStore.id)// 查询当前用户的待审核店铺列表
        .then((value: Array<StoreModel>) => {
            if (value) {
                stores.value = value;//查询不为空，更新store的值
            } else {
                isEmpty.value = true;//为空
            }
        })
})

//同意店铺申请
const authStoreClick = (id: string) => {//调用店铺申请
    managerApis.auditedStore(userStore.id, id, 1)
        .then((value: boolean) => {// 如果操作成功，则重新查询待审核店铺列表并更新
            if (value) {
                managerApis.queryAuditingStoreList(userStore.id)
                    .then((value: Array<StoreModel>) => {
                        if (value) {
                            stores.value = value;
                        } else {
                            isEmpty.value = true;
                        }
                    })
            }
        })
}
// 驳回店铺申请的函数
const refuseStoreClick = (id: string) => {//调用驳回申请
    managerApis.auditedStore(userStore.id, id, 4)
        .then((value: boolean) => {
            if (value) {//查询店铺列表状态并更新
                managerApis.queryAuditingStoreList(userStore.id)
                    .then((value: Array<StoreModel>) => {
                        stores.value = value;
                        isEmpty.value = value.length === 0 ? true : false;
                    })
            }
        })
}
</script>

<template>
    <el-scrollbar height="100%" style="overflow-y: hidden;"><!-- 使用el-scrollbar组件来提供滚动功能，并限制高度为100% -->
        <el-empty v-show="isEmpty" style="width: 100%;height: 100%;" description="这里还没有待审核的商铺哦～" /><!-- 显示空状态组件 -->
        <el-space wrap :size="size" :fill="fill" style="width: 100%;"><!-- 设置间距 -->
            <div v-for="i in stores" :key="i.id">
                <el-card shadow="hover" style="height: auto;">
                    <!-- 使用el-row和el-col组件来布局卡片内容 -->
                    <el-row style="width: 100%;" align="middel">
                        <el-col :span="20">
                            <el-row>
                                <el-col :span="24">
                                    <!-- 显示店铺名称 -->
                                    <el-text style="font-size: large;font-weight: bold;">
                                        {{ i.store_name }}
                                    </el-text>
                                </el-col>
                                <el-col :span="24" style="margin-top: 1%;">
                                    <!-- 显示申请ID -->
                                    <el-text>
                                        申请ID：{{ i.id }}
                                    </el-text>
                                </el-col>
                                <el-col :span="24" style="margin-top: 1%;">
                                    <!-- 显示店铺描述 -->
                                    <el-text>
                                        店铺描述：{{ i.introduce }}
                                    </el-text>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="4">
                            <!-- 按钮 -->
                            <el-row>
                                <el-col :span="24">
                                    <!-- 驳回按钮申请 -->
                                    <el-button type="danger" plain style="width: 100%;padding: 3%;"
                                        @click="refuseStoreClick(i.id!)">驳回申请</el-button>
                                </el-col>
                                <el-col :span="24" style="margin-top: 10%;">
                                    <!-- 同意按钮申请 -->
                                    <el-button type="success" plain style="width: 100%;padding: 3%;"
                                        @click="authStoreClick(i.id!)">同 意</el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-space>
    </el-scrollbar>
</template>